/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<navigator class="address-create" @tap.stop="clickMenu" data-type="login" data-url="/pages/user/address_add/address_add" role="navigation">
				<view class="create-btn">+新建地址</view>
			</navigator>
			<block v-for="(item,index) in addressList" :key="index">
				<view class="address-box"  >
					<view class="topbox" @tap.stop="selectAddress" :data-id="item.address_id">
						<view class="address-user">
							<view class="user-name">{{item.consignee}}</view>
						</view>
						<view class="address-info">
							<view class="mobile">{{item.mobile}}</view>
						</view>
						<view class="address">{{item.province_name}} {{item.city_name}} {{item.district_name}} {{item.address}}</view>
					</view>
					<view class="footbox">
						<view class="leftbox" >
							<view @tap="setDefault" class="choosebox" :data-id="item.address_id" :data-state="item.is_default">
								<image :src="imgUrl+'common/ischeck.png'" v-if="item.is_default==1" role="img"></image>
								<image :src="imgUrl+'cart/nocheck.png'" v-else mode=""></image>
							</view>
							设为默认
						</view>
						<view @tap="editAddress" class="rightbox" :data-id="item.address_id">
							<image class="editimg" :src="imgUrl+'common/address_edit.png'" role="img"></image>
							编辑
						</view>
					</view>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	import {getUserAddress,putAddress} from "@/api/api.js";
	import common from "@/common/common.js";
	import config from "@/api/config";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				addressList:"",//用户地址
				operate: null, //操作类型，select：订单选择地址操作，其他：普通展示
				
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(options){
			console.log(options)
			this.operate=options.operate;
		},
		onShow(){
			/*获取用户地址*/ 
			
			if(this.hasLogin){
				this._getUserAddress()
			}else{
				common.toast("none","请登录",2000)
			}
			
		},
		methods:{
			_getUserAddress(){
				getUserAddress().then(res=>{
					console.log(res)
					if(res){
						this.addressList=res;
					}
					
					// this.isDefault=res.is_default;
				})
			},
			//设为默认
			setDefault(e){
				/*修改默认地址*/
				console.log(e)
				let address_id=e.currentTarget.dataset.id;
				let state =e.currentTarget.dataset.state;
				
				if(state==0){
					let params={
						"address_id":e.currentTarget.dataset.id,
						"is_default":1
					}
					this._putAddress(params)
					
				}else{
					let params={
						"address_id":e.currentTarget.dataset.id,
						"is_default":0
					}
					this._putAddress(params)
					
				}
				
			},
			/*修改默认*/
			_putAddress(params){
				putAddress(params).then(res=>{
					if(res.status==1){
						this._getUserAddress()
					}
					console.log(res)
				})
			},
			/*选择地址*/
			selectAddress(e){
				console.log(e)
				let address_id=e.currentTarget.dataset.id;
				
				console.log(this.operate)
				if(this.operate=="selectAdress"){
					uni.setStorageSync('addressInfo', address_id);
					uni.navigateBack({
						delta:1
					})
				}
			},	 
			/*编辑*/
			editAddress(e){
				let addressId=e.currentTarget.dataset.id;
				
				uni.navigateTo({
					url:`/pages/user/address_add/address_add?id=${addressId}`
				})
			},
			clickMenu(e){//跳转方法
				console.log(e)
				let url=e.currentTarget.dataset.url;
				let login=e.currentTarget.dataset.type;
				if(login){
					// this.params.prom_type=6;
					if(this.hasLogin){
						uni.navigateTo({
							url:url
						})
					}else{
						common.islogin()
						
					}
					
				}else{
					uni.navigateTo({
						url:url
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		margin-bottom: 200rpx;
	}

	.address-box {
		background-color: white;
		padding: 25rpx 25rpx 25rpx 25rpx;
		font-size: 28rpx;
		border-bottom: 3rpx solid #f3f3f3;
		width: 710rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.address-box .topbox {
		width: 100%;
		border-bottom: 1rpx solid #f3f3f3;
		height: 120rpx;
	}

	.address-box .footbox {
		width: 100%;
		height: 60rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	.choosebox {
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.address-box .footbox .leftbox {
		height: 100%;
		width: 200rpx;
	}

	.address-box .footbox .rightbox {
		height: 100%;
		width: 120rpx;
		text-align: right;
	}

	.editimg {
		width: 32rpx;
		height: 34rpx;
		vertical-align: middle;
		position: relative;
		top: -2rpx;
	}

	.address-user {
		box-sizing: border-box;
		display: inline-block;
		vertical-align: middle;

	}

	.user-name {
		font-size: 30rpx;
		padding-bottom: 20rpx;
		word-break: keep-all;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 380rpx;
	}

	.default {
		color: white;
		background-color: red;
		padding: 4rpx;
		width: fit-content;
		border-radius: 6rpx;
	}

	.address-info {
		box-sizing: border-box;
		padding-left: 10rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		vertical-align: middle;
	}

	.mobile {
		padding-bottom: 20rpx;
	}

	.address {
		height: 50rpx;
		overflow: hidden;
		font-size: 24rpx;
		color: #999;
		width: 100%;
		line-height: 50rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.address-edit {
		box-sizing: border-box;
		width: 95rpx;
		float: left;
		text-align: center;
		padding-top: 32rpx;
	}

	.address-edit>image {
		width: 36rpx;
		height: 42rpx;
	}

	.address-create {
		width: 50%;
		text-align: center;
		position: fixed;
		bottom: 80rpx;
		left: 25%;
	}

	.create-btn {
		font-size: 28rpx;
		color: white;
		background-color: #ff3b3b;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		display: block;
	}

	.choosebox {
		width: 32rpx;
		height: 32rpx;
		position: relative;
		top: -2rpx;
	}
</style>
